<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="wrap">
      <div class="model"></div>
    </div>
  </body>
  <style>
    .wrap {
      height: 800px;
      width: 400px;
      background-image: url("../img/1.jpeg");
      position: relative;
    }
    .model {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 100%;
      backdrop-filter: grayscale(1);
      transition: 1s ease-in-out;
    }
    .wrap:hover .model {
      height: 0;
    }
  </style>
</html>
